<template>
  <div id="category" ref="category">
    <nav-bar class="category-nav-bar">
      <div slot="center">分类</div>
    </nav-bar>
    <div class="category-layout">
      <scroll
        class="category-left-scroll"
        ref="leftscroll"
        :listenScroll="true"
        :pullup="true"
        :probeType="3"
      >
        <category-list
          :list="goodsClassifyList"
          @categoryListClick="categoryListClick"
        ></category-list>
      </scroll>
      <div class="category-right">
        <tab-control
          ref="tabcontrol"
          :list="titleList"
          :currentIndex="tabControlIndex"
          @tabControlClick="tabControlClick"
        ></tab-control>
        <scroll
          class="category-right-scroll"
          ref="scroll"
          :probeType="3"
          :listenScroll="true"
          :pullup="true"
          @scroll="scroll"
          @pullingUp="pullingUp"
        >
          <!-- 商品列表 -->
          <goods-list
            :list="showGoods"
            @goodsItemClick="goodsItemClick"
          ></goods-list>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { getClassifyList, getClassifyGoods } from "network/category.js";

import NavBar from "components/common/navbar/NavBar.vue";
import Scroll from "components/common/scroll/Scroll";
import GoodsList from "components/content/goods/GoodsList.vue";
import TabControl from "components/content/tabControl/TabControl.vue";

import CategoryList from "./childComps/CategoryList.vue";

export default {
  name: "Category",
  data() {
    return {
      goodsClassifyList: [],
      cid: 1,
      // 商品类型选项卡数据
      titleList: ["流行", "新款", "精选"],
      tabControlIndex: 0,
      // 商品列表数据
      goodsList: {
        流行: {
          pageNo: 0,
          list: []
        },
        新款: {
          pageNo: 0,
          list: []
        },
        精选: {
          pageNo: 0,
          list: []
        }
      },
      // 离开保存scroll的y值
      saveY: 0
    };
  },
  components: {
    Scroll,
    NavBar,
    CategoryList,
    TabControl,
    GoodsList
  },
  computed: {
    showGoods() {
      return this.goodsList[this.titleList[this.tabControlIndex]].list;
    }
  },
  created() {
    //获取分类列表数据
    this.getClassifyList();
    //获取分类商品数据
    this.getClassifyGoods("流行", this.cid);
    this.getClassifyGoods("新款", this.cid);
    this.getClassifyGoods("精选", this.cid);
  },
  mounted() {
    // 监听商品图片加载完毕
    this.imgload();
  },
  activated() {
    this.$refs.leftscroll.refresh();
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
  },
  deactivated() {
    //保存Y值
    this.saveY = this.$refs.scroll.scroll.y;
  },
  methods: {
    /**
     * 重复繁杂代码的封装
     */
    scrollRefresh() {
      this.$refs.scroll.refresh();
    },
    imgload() {
      // let refreshDebounce = debounce(this.scrollRefresh, 400);
      // this.$bus.$on("goodsImageLoad", res => {
      //   if (res.path == this.$route.path) {
      //     refreshDebounce();
      //   }
      // });
      // 监听商品图片加载完毕
      let count = 0;
      this.$bus.$on("goodsImageLoad", res => {
        if (res.path == this.$route.path) {
          if (count++ % 4 == 0) {
            try {
              this.scrollRefresh();
            } catch (err) {
              // console.log(err);
            }
          }
        }
      });
    },
    /**
     * 事件监听相关的方法
     */
    categoryListClick(e) {
      this.$refs.leftscroll.refresh();
      // console.log(e);
      this.cid = e.cid;
      // 页面回到顶部
      this.$refs.scroll.scrollTo(0, 0, 0);
      // 把原来的数据清空
      for (const key in this.goodsList) {
        this.goodsList[key].pageNo = 1;
        this.goodsList[key].list = [];
      }
      // 请求新的数据
      this.getClassifyGoods("流行", this.cid);
      this.getClassifyGoods("新款", this.cid);
      this.getClassifyGoods("精选", this.cid);
      // 强制刷新
      this.$forceUpdate();
    },
    tabControlClick(index) {
      this.tabControlIndex = index;

      // 切换后恢复上拉加载和重新计算srcoll
      this.$refs.scroll.finishPullUp();
      setTimeout(() => {
        this.$refs.scroll.refresh();
      }, 10);
    },
    scroll() {},
    pullingUp() {
      //上拉加载事件
      this.getClassifyGoods(
        this.titleList[this.tabControlIndex],
        this.cid
      ).then(res => {
        if (res) {
          // 恢复上拉加载事件
          this.$refs.scroll.finishPullUp();
        }
        this.$refs.scroll.refresh();
      });
    },
    goodsItemClick(goods) {
      // 商品点击事件,跳转页面
      this.$router.push({
        path: "/detail",
        query: {
          id: goods.id
        }
      });
    },

    /**
     * 网络请求
     */
    getClassifyList() {
      getClassifyList().then(res => {
        // console.log(res);
        this.goodsClassifyList = res.data.list;
      });
    },
    getClassifyGoods(type, cid) {
      // 获取页数加一,相当于请求下一页
      const pageNo = this.goodsList[type].pageNo + 1;
      return getClassifyGoods(type, cid, pageNo).then(res => {
        if (res.data.listLength != 0) {
          // console.log(res);
          // 把一个数组追加到另一个数组里
          this.goodsList[type].list.push(...res.data.list);
          // 请求成功把页数加一
          this.goodsList[type].pageNo += 1;
        }
        return Promise.resolve(res.data.listLength != 0);
      });
    }
  }
};
</script>

<style scoped>
#category {
  position: relative;
  height: 100vh;
}
.category-nav-bar {
  background: var(--color-tint);
  color: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.category-layout {
  display: flex;
}
.category-left-scroll {
  overflow: hidden;
  height: calc(100vh - 49px - 44px);
  width: 80px;
}
.category-right {
  width: calc(100vw - 80px);
  background: #fff;
}
.category-right-scroll {
  overflow: hidden;
  height: calc(100vh - 49px - 44px - 44px);
}
</style>
